import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。
// 它采用集中式（放到一个大对象 state中）存储管理应用的所有组件的状态，
// 并以相应的规则保证状态以一种可预测的方式（使用mutations）发生变化。
export default new Vuex.Store({
  state: {
    age: 199
  },
  mutations: {
    add(state) {
      state.age += 1
    },
    addN(state, n) {
      state.age += n
    },
    sub(state) {
      state.age -= 1
    },
    subN(state, n) {
      state.age -= n
    },
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000) 
    },
    addNAsync(context, n) {
      setTimeout(() => {
        context.commit('addN', n)
      }, 1000) 
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000) 
    },
    subNAsync(context, n) {
      setTimeout(() => {
        context.commit('subN', n)
      }, 1000) 
    },
  },
  getters: {
    myAge: state => {
      return '我的年龄' + state.age + '你真好'
    }
  }
})
